<template>
    <form-container title="编辑车间信息" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
        <a-form ref="formRef" :model="formState" :rules="formRules" layout="vertical">
            <a-form-item label="编码：" name="stationCode">
				<a-input v-model:value="formState.stationCode" placeholder="请输入编码" allow-clear />
			</a-form-item>
			<a-form-item label="名称：" name="stationName">
				<a-input v-model:value="formState.stationName" placeholder="请输入名称" allow-clear />
			</a-form-item>
			<a-form-item label="产线：" name="lineId">
				<a-select v-model:value="formState.lineId" placeholder="请选择分类" :options="lineOptions" :loading="lineLoading" allow-clear></a-select>
			</a-form-item>
			<a-form-item label="工序：" name="processId">
				<a-select v-model:value="formState.processId" placeholder="请选择分类" :options="processOptions" :loading="processLoading" allow-clear></a-select>
			</a-form-item>
			<a-form-item label="备注：" name="stationDesc">
				<a-input v-model:value="formState.stationDesc" placeholder="请输入备注" allow-clear />
			</a-form-item>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
        </template>
    </form-container>
</template>

<script setup name="updatePassword">
    import { required } from '@/utils/formRules'
    import processApi from '@/api/mes/processinfo/processApi'
	import lineApi from '@/api/mes/basicdata/lineApi'
	import stationApi from '@/api/mes/basicdata/stationApi'

    // 定义emit事件
    const emit = defineEmits({ successful: null })
    // 默认是关闭状态
    let visible = ref(false)
    const formRef = ref()
    // 表单数据
    const formState = ref({})
    const submitLoading = ref(false)

    // 打开抽屉
    const onOpen = (email) => {
        visible.value = true
        formState.value = email
    }
    // 关闭抽屉
    const onClose = () => {
        visible.value = false
}

//产线下拉框
const lineOptions = ref([])
const lineLoading = ref(false)

const getLineList = async () => {
	try {
		lineLoading.value = true
		const res = await lineApi.linePage()
		lineOptions.value = res.records.map(item => ({
			label: item.lineName,
			value : item.id
		}))
	} catch (error) {
		console.error('获取产线列表失败',error)
	} finally {
		lineLoading.value = false
	}
}

	//工序下拉框
const processOptions = ref([])
const processLoading = ref(false)

const getProcessList = async () => {
	try {
		processLoading.value = true
		const res = await processApi.processPage()
		processOptions.value = res.records.map(item => ({
			label: item.processName,
			value : item.id
		}))
	} catch (error) {
		console.error('获取工序列表失败',error)
	} finally {
		processLoading.value = false
	}
}

onMounted(() => {
	getLineList(),
	getProcessList()
})

    // 提交数据
    const onSubmit = async () => {
        formRef.value.validateFields().then(() => {
            submitLoading.value = true
            let formData = {
                id: formState.value.id,
                stationCode: formState.value.stationCode,
                stationName: formState.value.stationName,
                lineId: formState.value.lineId,
                processId: formState.value.processId,
                stationDesc: formState.value.stationDesc
            }
            // 提交数据
            stationApi
                .stationUpdate(formData)
                .then(() => {
                    //formRef.value.resetFields()
                    visible.value = false
                    emit('successful', formData)
                    
                })
                .finally(() => {
                    submitLoading.value = false
                    callback() //调用组件中的回调方法
                })
        })
            .catch(() => {
                console.error('表单验证失败')
        })
    }
    // 调用这个函数将子组件的一些数据和方法暴露出去
    defineExpose({
        onOpen
    })
</script>

<style scoped></style>